@import "_variables.scss";

.home {
  h1 {
    font-size: $font-xlarge;
  }

  h2 {
    font-size: $font-large;
  }

  h3 {
    font-size: $font-medium;
  }

  h1, h2, h3 {
    text-align: center;
  }

  hr {
    display: block;
  }

  p {
    font-size: $font-small;
    font-weight: 100;
    color: #999;
    margin: 0px;
  }

  .banner {
    color: white;
    text-align: center;
    background: url(./../images/banner.jpg) no-repeat center bottom;
    background-size: cover;
    height: 260px;
    padding-bottom: auto;

    .oster-bg {
      width: 100%;
      max-height: 25rem;
      vertical-align: top;
    }

    .tag-line {
      padding-top: $home-line-spacing * 3;
      margin-bottom: $home-line-spacing * 2;
    }

    p {
      color: white;
      margin-bottom: $home-line-spacing * 2;
    }

    .quick-start {
      display: inline-block;
      line-height: 48px;
      color: #ffffff;
      font-size: 18px;
      width: 212px;
      border: 1px solid #fff;
      &:hover {
        color: #333;
        background-color: $secondary-background-color;
        border: 1px solid $secondary-background-color;
      }
    }
  }

  .features {
    .col-lg-3 {
      width: 50%;
      padding-left: 0px;
      padding-right: 0px;
    }

    h2 {
      margin-top: $home-line-spacing * 2;
    }

    h3 {
      margin: $home-line-spacing 0 $home-line-spacing 0;
    }

    .feature-icon {
      text-align: center;
    }

    .feature-desc {
      margin: 8px;
      padding: 8px;
      background-color: $secondary-background-color;
    }

    p {
      line-height: 24px;
    }
  }

  .get-started {
    text-align: center;
    padding-bottom: $home-line-spacing * 2;

    h2 {
      margin-top: $home-line-spacing * 2;
      margin-bottom: $home-line-spacing;
    }

    p {
      padding: 0 0 $home-line-spacing 0;
    }

    .quick-start {
      color: #fff;
      background-color: #0073eb;
      font-size: 18px;
      display: inline-block;
      line-height: 48px;
      width: 212px;
      &:hover {
        color: #fff;
        background-color: #3095ff;
        font-size: 18px;
        display: inline-block;
        line-height: 60px;
        width: 212px;
      }
    }
  }
}

@media (min-width: 992px) {
  .home {
    h1 {
      font-size: $font-xxxlarge;
    }

    h2 {
      font-size: $font-xxlarge;
    }

    h3 {
      font-size: $font-xlarge;
    }

    h1, h2, h3 {
      text-align: center;
    }

    hr {
      display: none;
    }

    p {
      font-size: $font-medium;
      font-weight: 100;
      color: #999;
      margin: 0px;
    }

    .banner {
      color: white;
      height: 525px;

      .tag-line {
        padding-top: $home-line-spacing * 6;
        margin-bottom: $home-line-spacing * 3;
      }

      p {
        margin-bottom: $home-line-spacing * 3;
      }

      .quick-start {
        line-height: 60px;
        font-size: 18px;
        width: 212px;
      }
    }

    .services {
      background-color: #f4f5f7;

      h2 {
        margin-top: $home-line-spacing * 4;
      }

      .sub-title {
        padding: $home-line-spacing 0 0 0;
      }

      .service-row {
        padding: $home-line-spacing 0 $home-line-spacing 0;
      }
    }

    .features {
      h2 {
        margin-top: $home-line-spacing * 4;
        margin-bottom: $home-line-spacing * 4;
      }

      .feature-desc {
        margin: 8px;
        padding: 8px;
        background-color: transparent;
      }
    }

    .get-started {
      padding-bottom: $home-line-spacing * 6;

      h2 {
        margin-top: $home-line-spacing * 4;
        margin-bottom: $home-line-spacing * 2;
      }

      .quick-start {
        font-size: 18px;
        line-height: 60px;
        width: 212px;
      }
    }
  }
}